<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
	  <home></home>
	 
  </div>
  <template id="Home">
	  <div>
		  Home组件
		  <common-head ref="child"></common-head>
	  </div>
  </template>
  
  <script src="./vue.js"></script>
  <script>
	  // 头部组件
	 const CommonHead = {
		inject:['a','b'],
		template:`
			<div>
				我是头部组件
				<h2> {{msg}} </h2>
			</div>
		`,
		data () {
			return {
				msg: '我是子组件数据'
			}
		},
		mounted() {
			console.log(this.a)
			console.log(this.b)
		}
	 }
    const Home = {
			provide:{ // 向子组件提供的数据
				a: 10,
				b:20
			},
      template: '#Home',
			components: {
				CommonHead
			},
			data () {
				return {
					msg: '我是home组件中data中的数据'
				}
			},
			mounted() {
			
			}	
    }

	Vue.component('Home',Home)

    const vm = new Vue({
      el: '#app'
    })
  </script>
</body>
</html>